<template>
  <div>
    <n-drawer v-model:show="showModal" :width="dialogWidth">
      <n-drawer-content title="会员意向表详情" closable>
        <n-spin :show="loading" description="请稍候...">
          <n-descriptions label-placement="left" class="py-2" column="1">
            <n-descriptions-item>
              <template #label>
                意向用户ID
              </template>
              {{ formValue.memberId }}
            </n-descriptions-item>
<!--            <n-descriptions-item>
              <template #label>
                称呼
              </template>
              {{ formValue.name }}
            </n-descriptions-item>-->
<!--            <n-descriptions-item>
              <template #label>
               性别
              </template>
              <span v-if="formValue.sex == 1">男</span>
              <span v-if="formValue.sex == 2">女</span>
            </n-descriptions-item>-->
            <n-descriptions-item>
              <template #label>
                国家/地区
              </template>
              {{ formValue.country }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                语言喜好
              </template>
              {{ formValue.language }}
<!--              <n-tag :type="getOptionTag(options.language, formValue?.language)" size="small" class="min-left-space">-->
<!--                {{ getOptionLabel(options.language, formValue?.language) }}-->
<!--              </n-tag>-->
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                手机号
              </template>
              {{ formValue.phoneArea }} {{ formValue.phone }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                邮箱
              </template>
              {{ formValue.mail }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                微信号
              </template>
              {{ formValue.wechatNo }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                LINE ID
              </template>
              {{ formValue.lineId }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                备注
              </template>
              <span v-html="formValue.remark"></span>
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                创建时间
              </template>
              {{ formValue.createAt }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                修改时间
              </template>
              {{ formValue.updateAt }}
            </n-descriptions-item>
          </n-descriptions>
        </n-spin>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script lang="ts" setup>
import {computed, onMounted, ref} from 'vue';
import { useMessage } from 'naive-ui';
import { View } from '@/api/pmsMemberIntention';
import {State, newState, options, loadOptions} from './model';
import { adaModalWidth, getOptionLabel, getOptionTag } from '@/utils/hotgo';


const message = useMessage();
const loading = ref(false);
const showModal = ref(false);
const formValue = ref(newState(null));
const dialogWidth = computed(() => {
  return adaModalWidth(580);
});
const fileAvatarCSS = computed(() => {
  return {
    '--n-merged-size': `var(--n-avatar-size-override, 80px)`,
    '--n-font-size': `18px`,
  };
});

function openModal(state: State) {
  showModal.value = true;
  loading.value = true;

  View({ id: state.id })
    .then((res) => {
      formValue.value = res;
    })
    .finally(() => {
      loading.value = false;
    });
}

defineExpose({
  openModal,
});

</script>

<style lang="less" scoped></style>


